var React = require('react');
var ReactRedux = require('react-redux');

var TodoList = require('./TodoList.jsx');
var TodoItem = require('./TodoItem.jsx');

var actions = require('../actions/index');

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = { newTodo: '' };
    }

    handleNewTodoKeyDown(evt) {
        if (evt.keyCode !== 13) return;
        evt.preventDefault();
        let val = this.state.newTodo.trim();
        if (val) {
            console.log(val);
            this.props.onAddTodo(val);
            this.refs.todoApp.onAdd(val);
            this.setState({ newTodo: '' });
        }
    }

    handleChange(evt) {
        this.setState({ newTodo: evt.target.value });
    }

    render() {
        return (
            <div className="todoapp">
                <header className="header">
                    <h1>todos</h1>
                    <input
                        className="new-todo"
                        placeholder="What needs to be down?"
                        onKeyDown={this.handleNewTodoKeyDown.bind(this)}
                        onChange={this.handleChange.bind(this)}
                        value={this.state.newTodo}
                    />
                </header>
                <TodoList ref="todoApp" />
            </div>
        )
    }
}

Main = ReactRedux.connect(null,dispath=>{
    return {
        onAddTodo(val){
            console.log('aaa');
            dispath(actions.addTodo);
        }
    }
})(Main);

module.exports = Main;